<template>
    <el-form :inline=true class="el-form--inline" label-position="right" style="height: 30px;display: flex;flex-direction: row;width: 800px">
        <el-form-item style="height: 30px;display: flex;flex-direction: row;width: 100px">
            <el-select v-model="value" placeholder="字体类型" @change="handleSelect($event)" style="width: 100%" value="value" allow-create filterable>
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :value="item.value"
                style="max-width: 150px">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="height: 30px;display: flex;flex-direction: row;width: 200px;margin-left: 0" label="尺寸">
            <el-slider
                    show-input
                    v-model="value8"
                    input-size="mini"
            @change="handleSize($event)">
            </el-slider>
        </el-form-item>
        <el-form-item style="height: 10px;display: flex;flex-direction: row;width: 100px;margin-left: 0;margin-top: 5px">
            <el-button type="info" @click="handleEffect('i')" style="height: 30px;width: 10px;padding: 10px;">I</el-button>
            <el-button type="info" @click="handleEffect('b')" style="height: 30px;width: 10px;padding: 10px">B</el-button>
        </el-form-item>
        <el-form-item style="height: 20px;margin-left: 0;">
            <el-button type="primary" @click="handleInput" style="height: 30px;width: 100px;padding: 0">点击输入文字</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Font",
        props: {},
        data() {
            return {
                options: [{
                    value: 'Arial',
                }, {
                    value: 'Times New Roman',
                }, {
                    value: '微软雅黑',
                }],
                value: '',
                value8:20,
                effect_i:'a',
                effect_b:'a',
            }
        },
        methods:{
            handleSelect:function (ev) {
                this.$emit('font-type',ev)
            },
            handleSize:function (ev) {
                this.$emit('font-size',ev)
            },
            handleEffect:function (ev) {
                if (ev=='i'){
                    if (this.effect_i=='i'){
                        ev=' '
                        this.effect_i=' '
                    } else{
                        this.effect_i='i'
                    }
                }
                else if (ev=='b'){
                    if (this.effect_b=='b'){
                        ev=' '
                        this.effect_b=' '
                    } else{
                        this.effect_b='b'
                    }
                }
                this.$emit('font-effect',ev)
            },
            handleInput:function () {
                this.$emit('input-dialog')
            }
        }
    }
</script>

<style scoped>
</style>
